<template>
  <div class="statistics-index">
    <div class="head">
      <div class="left">
        <div class="date-list">
          <div v-for="(item, key) in dateList" :key="item.id" @click="handleDate(item.id, key)" :class="{ active: dateListIndex === key }" class="date-item">{{ item.label }}</div>
        </div>
        <div class="time">已选时间：<i>2025-03-26</i> 至 <i>2025-04-01</i></div>
      </div>
      <div class="right">
        <el-button @click="handleExport">
          <div class="icon"></div>
          数据导出
        </el-button>
      </div>
    </div>
    <div class="main">
      <div class="turnover-statistics">
        <div class="title">
          <span>营业额统计</span>
        </div>
        <div class="statistics-main">
          <ComTurnover :begin='date.begin' :end="date.end"></ComTurnover>
        </div>
        <div class="label">
          <span>营业额(元)</span>
        </div>
      </div>
      <div class="user-statistics">
        <div class="title">
          <span>用户统计</span>
        </div>
        <div class="statistics-main">
          <ComUser :begin='date.begin' :end="date.end"></ComUser>
        </div>
        <div class="label">
          <div class="total">
            <span>用户总量（个）</span>
          </div>
          <div class="new">
            <span>新增用户（个）</span>
          </div>
        </div>
      </div>
      <div class="orders-statistics">
        <div class="title">
          <span>订单统计</span>
        </div>
        <div class="statistics-main">
          <ComOrders :begin='date.begin' :end="date.end"></ComOrders>
        </div>
      </div>
      <div class="top-statistics">
        <div class="title">
          <span>销量排名TOP10</span>
        </div>
        <ComTop10 :begin='date.begin' :end="date.end"></ComTop10>
      </div>
    </div>
  </div>
</template>

<script>
import { getExcelData } from '@/api/statistics'
import { getayer, getSevenDays, getThirtyDays, getThisWeekDate, getThisMonthDate } from '@/utils/formatDate'
import ComTop10 from './components/ComTop10.vue'
import ComOrders from './components/ComOrders.vue'
import ComTurnover from './components/ComTurnover.vue'
import ComUser from './components/ComUser.vue'
export default {
  name: 'StatisticsIndex',
  data () {
    return {
      dateListIndex: 1,
      date: {
        begin: '2025-03-27',
        end: '2025-04-02'
      },
      dateList: [
        {
          id: 1,
          label: '昨日'
        },
        {
          id: 2,
          label: '近7日'
        },
        {
          id: 3,
          label: '近30日'
        },
        {
          id: 4,
          label: '本周'
        },
        {
          id: 5,
          label: '本月'
        }
      ]
    }
  },
  components: {
    ComTurnover,
    ComUser,
    ComOrders,
    ComTop10
  },
  methods: {
    handleDate (num, key) {
      this.dateListIndex = key
      let date = []
      switch (num) {
        case 1:
          date = getayer()
          break
        case 2:
          date = getSevenDays()
          break
        case 3:
          date = getThirtyDays()
          break
        case 4:
          date = getThisWeekDate()
          break
        case 5:
          date = getThisMonthDate()
          break
      }

      this.$set(this.date, 'begin', date[0])
      this.$set(this.date, 'end', date[1])
    },
    handleExport () {
      this.$confirm('是否确认导出最近30天的运营数据？', '提示', {}).then(() => {
        getExcelData().then(res => {
          const url = URL.createObjectURL(res)
          const a = document.createElement('a')
          a.href = url
          a.download = '运营数据统计报表'
          document.body.appendChild(a)
          a.click()

          // 清理Blob
          setTimeout(() => {
            document.body.removeChild(a)
            URL.revokeObjectURL(url) // 释放内存
          }, 100)
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.statistics-index {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      gap: 10px;

      .date-list {
        display: flex;
        border: 1px solid #e5e4e4;
        background-color: #fff;
        border-radius: 5px;
        min-width: 400px;
        height: 40px;

        .date-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          cursor: pointer;
          border-right: 1px solid #e5e4e4;
          color: #333;

          &:last-of-type {
            border-right: 0;
          }

          &.active {
            background-color: #ffc200;
          }
        }
      }

      .time {
        color: #666;
        font-size: 14px;
      }
    }

    .right {

      ::v-deep button:hover {
        .icon {
          background-image: url('@/assets/icons/icon_upload@2x-active.png');
        }
      }

      ::v-deep button span {
        display: flex;
        align-items: center;
        gap: 5px;

        .icon {
          width: 15px;
          height: 15px;
          background: url('@/assets/icons/icon_upload@2x.png') no-repeat center;
          background-size: cover;
        }
      }
    }
  }

  .main {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin-top: 20px;
    height: 200px;

    > div {
      background-color: #fff;
      border-radius: 5px;
      padding: 20px;

      .title {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .statistics-main {
        height: 320px;
      }

      .label {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #666;
        gap: 10px;

        .total, .new {
          display: flex;
          align-items: center;
        }

        .total::before {
          display: block;
          content: '';
          width: 12px;
          height: 2px;
          background-color: #ffc100;
          margin-right: 5px;
        }

        .new::before {
          display: block;
          content: "";
          width: 12px;
          height: 2px;
          background-color: #fd7f7f;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
